<template>
  <v-chart :option="option" autoresize :loading="load" class="pack"/>
</template>

<script>
import {ref, defineComponent} from "vue";
import * as echarts from 'echarts'
export default defineComponent({
  //双峰柱状图
  name: "BimodalBarChart",
  data(){
    let load =false
    let unit = ['件', 'min']
    let option = {
      backgroundColor: '#fff0',
      grid: {
        top: '15%',
        left: '8%',
        right: '4%',
        bottom: '2%',
        containLabel: true,
      },
      tooltip: {
        trigger: 'axis',
        backgroundColor: 'rgba(0,0,0,0.6)',
        borderColor: 'rgba(0,0,0,0.6)',
        confine: true,
        padding: 5, // 提示框浮层内边距，单位px
        textStyle: {
          color: '#FFFFFF',
          fontSize: 13,
        },
        formatter: function (params) {
          let str = '';
          for (let i = 0; i < params.length; i++) {
            str = str + (params[i].seriesName + ' ' + params[i].value + unit[i]) + '<br/>';
          }
          return str;
        },
      },
      legend: {
        show: true,
        icon: 'rect',
        orient: 'horizontal',
        top: '6%',
        y: 'center',
        itemWidth: 12,
        itemHeight: 12,
        textStyle: {
          color: '#FFFFFF',
          fontSize: 14,
        },
        data: [
          { name: '处理数量', icon: 'circle' },
          { name: '处理时长', icon: 'circle' },
        ],
      },
      xAxis: [
        {
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            // 坐标轴刻度标签的相关设置
            show: true, // 是否展示坐标轴label
            color: '#FFFFFF',
            fontSize: 14,
            interval: 'auto',
          },
          type: 'category',
          data: ['0422', '0423', '0424', '0425', '0426', '0427', '0428'],
        },
      ],
      yAxis: [
        {
          name: '(单位:' + unit[0] + ')',
          nameTextStyle: {
            color: '#efefef',
            fontSize: 14,
            align: 'right',
          },
          type: 'value',

          min: 0,
          axisLabel: {
            // 坐标轴刻度标签的相关设置
            show: true, // 是否展示坐标轴label
            color: 'rgba(255, 255, 255, 1)',
            fontSize: 12,
            formatter: '{value}', // 格式化label
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: 'rgba(0,0,0,0.5)',
            },
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        {
          name: '(单位:' + unit[1] + ')',
          nameTextStyle: {
            color: '#efefef',
            fontSize: 14,
          },
          type: 'value',

          min: 0,
          axisLabel: {
            // 坐标轴刻度标签的相关设置
            show: true, // 是否展示坐标轴label
            color: 'rgba(255, 255, 255, 1)',
            fontSize: 12,
            formatter: '{value}', // 格式化label
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: 'rgba(0,0,0,0.5)',
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255,255,255,0.2)', // 线条颜色
              // width: 1,
              type: 'solid', // 线条样式，默认是实现，dashed是虚线
            },
          },
          axisTick: {
            show: false,
          },
        },
      ],
      series: [
        {
          name: '处理数量',
          type: 'pictorialBar',
          barGap: '0%',
          barWidth: 40,
          symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
          // barGap:10,
          color: '#247FFF',
          data: [71, 82, 89, 100, 73, 83, 72],
          itemStyle: {
            color: new echarts.graphic.LinearGradient(
                0,
                1,
                0,
                0,
                [
                  {
                    offset: 0,
                    color: 'rgba(49, 232, 255, 0.68)', // 0% 处的颜色
                  },
                  {
                    offset: 0.4,
                    color: 'rgba(149, 231, 212, 1)', // 100% 处的颜色
                  },
                ],
                false
            ),
          },
          emphasis: {
            disabled: true,
            focus: 'none',
          },
        },
        {
          yAxisIndex: 1,
          name: '处理时长',
          type: 'pictorialBar',
          barGap: '-30%',
          symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
          barWidth: 40,
          // barGap:10,
          color: '#247FFF',
          data: [92, 58, 26, 52, 100, 41, 70],
          itemStyle: {
            color: new echarts.graphic.LinearGradient(
                0,
                1,
                0,
                0,
                [
                  {
                    offset: 0,
                    color: 'rgba(255, 148, 148, 0.2)', // 0% 处的颜色
                  },
                  {
                    offset: 0.4,
                    color: 'rgba(255, 148, 148, 1)', // 100% 处的颜色
                  },
                ],
                false
            ),
          },
          emphasis: {
            disabled: true,
            focus: 'none',
          },
        },
      ],
    }
    return{
      load: ref(load),
      option: ref(option)
    }
  }
})
</script>

<style scoped>

</style>